<template>
	<view class="classdesc">
		<view style="width: 100%;">
			<view class="m-title">班级介绍（选填）</view>
		</view>
		<view class="input-box" v-for="(item,index) in textList" :key="index">
			<view class="i-title-wrap">
				<view class="box-title">输入文字</view>
				<view @click="fnDescDelete(index)" class="i-delete">删除</view>
			</view>
			<textarea :cursor-spacing="20"  class="i-textarea-bj" v-model="item.desc"></textarea>
		</view>
		<view class="input-box" v-for="(item,index) in imgList" :key="index">
			<view class="i-title-wrap">
				<view class="box-title">添加图片</view>
				<view @click="fnImgDelect(index)" class="i-delete">删除</view>
			</view>
			<view class="i-textarea-bj">
				<view style="width: 100%;display: flex;">
					<view  v-if="imgurl.length>0" style="display: flex;">
						<view class="i-img-box" v-for="(img,j) in imgurl" :key="j">
							<image class="i-img" mode="aspectFill" :src="img"></image>
						</view>
					</view> 
					<imgselect @input="fnSetimgInfo($event,index)"  v-else v-model="imgurl">
						<view slot="main" class="i-img-add">
							<Vsicon type="icon-jiahao" size="30"></Vsicon>
						</view>
					</imgselect>
				</view>
			</view>
		</view>
		<view style="display: flex;width: 100%;">
			<view @click="fnTextClick" class="i-desc adddesc">
				<view style="display: flex;align-items: center;">
					<Vsicon type="icon-duoxingwenzi" size="22" margin="5"></Vsicon>
					添加文字
				</view>
			</view>
			<view @click="fnAddImgClick" class="i-desc addimg">
				<view style="display: flex;align-items: center;">
					<Vsicon type="icon-tupian" size="22" margin="5"></Vsicon>
					添加图片
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgselect from './img-select.vue'
	export default{
		props:{
			value:{},
			
		},
		components:{
			imgselect
		},
		data(){
			return{
				val:'',
				textList:[],
				imgList:[],
				canvasWidth:'',
				canvasHeight:'',
				windowWidth:'',
				imgurl:[],
			}
		},
		watch:{
			value(nval){
				//console.log(nval)
				this.val=nval
			},
			textList(nval){
				//console.log(nval)
				let arr={
					textlist:this.textList,
					imglist:this.imgList
					}
				 this.$emit('input',arr);
			},
			imgList(nval){
				let arr={
					textlist:this.textList,
					imglist:this.imgList
					}
				 this.$emit('input',arr);
			}
		},
		mounted() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();
			this.windowWidth=uni.getSystemInfoSync().windowWidth
			console.log(this.windowWidth)
			
		},
		methods:{
			fnSetimgInfo($event,index){
				console.log($event,index)
				this.imgList[index].imgurl=$event
			},
			fnTextClick(){
				if(this.textList.length>0) return;
				this.textList.push({
					desc:''
				})
			},
			fnAddImgClick(){
				if(this.imgList.length>0) return;
				this.imgList.push({
					imgurl:''
				})
			},
			fnDescDelete(index){
				this.textList.splice(index,1)
			},
			fnImgDelect(index){
				this.imgList.splice(index,1)
				this.imgurl=[]
			},
		}
	}
</script>

<style lang="scss">
	.classdesc{
		width: 100%;
		//background-color: #007AFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 10px;
		.photo_canvas {
			position: absolute;
			left: -1100%;
			top:-1100%;
		}
		
		.m-title{
			width: 100%;
			padding: 10px 0;
			font-size: 16px;
		}
		.input-box{
			width: 100%;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 0 10px 0;
			box-shadow: 0 0 5px #C0C0C0;
			background-color: #fff;
			.i-title-wrap{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				.box-title{
					padding: 10px ;
				}
				.i-delete{
					padding: 5px;
					font-size: 15px;
					color: #ff9900;
				}
			}
			
			.i-textarea-bj{
				width: 90%;
				height: 100px;
				padding: 10px 0;
				font-size: 14px;
				color: $vx-fontcolor-2;
			//	background-color: #2C405A;
				.i-img{
					width: 80px;
					height:80px;
				}
				.i-img-box{
					width: 80px;
					height:80px;
				}
				.i-img-add{
					width: 80px;
					height: 80px;
					border: 1px solid #C0C0C0;
					border-radius: 4px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #C0C0C0;
				}
			}
		}
		.i-desc{
			display: flex;
			justify-content: center;
			align-items: center;
			//border: 1px solid #fff2e5;
			width: 50%;
			color: #ffcb80;
			&:active{
				background-color: #ffe6cc;
			}
		}
		.adddesc{
			border-right: 1px solid #fff2e5;
		}
	}
</style>
